<template>
	<view>

		<!-- 套餐4-->
		<view v-if="tabListNum==4" class="flex-column">
			<view class="headInformation">
				<image @click="signFn()" class="signImg" src="../../static/会员卡yi/微信图片_20240320154546.png" mode="">
				</image>
				<view class="backgroundColor">
					<!-- 头像信息 -->
					<view class="headformation flex-between">
						<view class="flex" @click="modifyAvaterInfo()">
							<image class="avater" :src="userInfo.avatar" mode=""></image>
							<view style="margin-left: 10rpx; " class="flex-column-start">
								<view style="color: #fff;font-size: 32rpx;margin-bottom: 8rpx;">
									{{ userInfo.nickname}}
								</view>
								<view class="memberType">
									{{userInfo.level_name}}
								</view>
								<!-- <view class="memberType flex">
									<image class="crownIcon" src="../../static/会员卡首页4/组合 314.png" mode=""></image>
									
									
								</view> -->
							</view>
						</view>
						<view class="membershipCode" @click="memberCard()">
							<image class="codeImage" src="../../static/会员卡首页1/组合 2.png" mode=""></image>
							<view style="color: #fff;">
								会员码
							</view>
						</view>

					</view>
					<!-- 嵌套背景颜色 -->
					<view class="nestedBackground">
						<!-- 充值图标 -->
						<image @click="rechargeFn()" class="rechargeBtn" src="../../static/会员卡首页4/组合 338.png" mode="">
						</image>
						<!-- 会员进度条 -->
						<pro-gress :list="Steps" :packageType="packageTypes" :StepInfo="StepInfos"></pro-gress>

						<view class="myOrderCard">

							<view class="flex-wrap-justifyBetween" style="margin-top: 20rpx;">
								<block v-for="(item, i) in menuNavigationList" :key="i">
									<view class="flex-column ">
										<image class="avaterIcon" :src="item.icon" mode=""></image>
										<view class="rightContent">
											<view class="authorizationTitle">{{ item.name }}</view>
										</view>
										<view class="rightContent">
											<view class="secondAuthorizationTitle">{{ item.desc }}</view>
										</view>
									</view>

								</block>
							</view>


						</view>
						<!-- 三角 -->
						<view class="triangle">

						</view>
					</view>
				</view>

			</view>

			<!-- 我的订单 -->
			<view class="myOrderCards">
				<view class="flex-between myOrder">
					<view class="flex">
						<text class="rectangle"></text>
						<text style="font-size: 30rpx;font-weight: 600;">我的订单</text>
					</view>
					<text @click="checkAllOrderFn()">查看全部<uni-icons type="right" size="14"
							color='rgb(153, 153, 153)'></uni-icons></text>
				</view>
				<view class="flex-wrap-justifyAround" style="margin-top: 20rpx;">
					<block v-for="(item, i) in menuList" :key="i">
						<view class="flex-column " @click="checkOrderFn(item,)">
							<image class="avaterIcon" :src="item.img" mode=""></image>
							<view class="rightContent">
								<view class="authorizationTitle">{{ item.text }}</view>
							</view>
						</view>

					</block>
				</view>


			</view>
			<!-- 我的余额 -->
			<view class="flex-around dataDetailsCard" v-if="userInfo">
				<!-- <view class="flex"  v-for="(item,i) in dataDetails" :key="i">
					<view class="flex-column" >
						<view style="color: rgb(60, 61, 79);font-size: 36rpx; font-weight: 700; margin-bottom: 5rpx;">
							{{totelName(item.number)}}
						</view>
						<view style="color:rgb(60, 61, 79);font-size: 24rpx;">
							{{item.text}}
						</view>
					</view>
					<view class="dataDetailsBorder" >
						|
					</view>
				</view> -->
				<view class="flex-column">
					<view style="color: rgb(60, 61, 79);font-size: 36rpx; font-weight: 700; margin-bottom: 5rpx;">
						{{totelName(userInfo.balance)}}
					</view>
					<view style="color:rgb(60, 61, 79);font-size: 24rpx;">
						我的余额
					</view>
				</view>
				<view class="dataDetailsBorder">
					|
				</view>
				<view class="flex-column">
					<view style="color: rgb(60, 61, 79);font-size: 36rpx; font-weight: 700; margin-bottom: 5rpx;">
						{{totelName(userInfo.coupon_num)}}
					</view>
					<view style="color:rgb(60, 61, 79);font-size: 24rpx;">
						我的卡券
					</view>
				</view>
				<view class="dataDetailsBorder">
					|
				</view>
				<view class="flex-column">
					<view style="color: rgb(60, 61, 79);font-size: 36rpx; font-weight: 700; margin-bottom: 5rpx;">
						{{totelName(userInfo.package_num)}}
					</view>
					<view style="color:rgb(60, 61, 79);font-size: 24rpx;">
						套餐卡
					</view>
				</view>
				<view class="dataDetailsBorder">
					|
				</view>
				<view class="flex-column">
					<view style="color: rgb(60, 61, 79);font-size: 36rpx; font-weight: 700; margin-bottom: 5rpx;">
						{{totelName(userInfo.surplus_integral?userInfo.surplus_integral:userInfo.integral)}}
					</view>
					<view style="color:rgb(60, 61, 79);font-size: 24rpx;">
						我的积分
					</view>
				</view>

			</view>

			<!-- 其他配置 -->

			<view class="myOrderCards" style="margin-top: 22rpx;">
				<view class=" myOrder ">
					<text class="rectangle"></text>
					<text style="font-size: 30rpx;font-weight: 600;">常用工具</text>
				</view>
				<view class="flex-wrap-flex-start" style="margin-top: 20rpx;">
					<block v-for="(item, i) in otherNavigationList" :key="i">
						<view class="flex-column infoBox" @click="navTo(item)">
							<image class="avaterIcon" :src="item.img" mode=""></image>
							<view class="rightContent">
								<view class="authorizationTitle">{{ item.text }}</view>
							</view>
						</view>

					</block>
				</view>


			</view>
			<!-- <view class="wxbtn">
				<view class="ct" :style="动态样式">小程序领劵</view>
				<view>
					<wx-open-launch-weapp
						style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: inline-block; border: none;"
						username="gh_c68673c8e45f" path="pages/index/index.html">
						<script type="text/wxtag-template">
							<style>
			                    .btn {
			                        position: absolute;
			                        top: 0;
			                        left: 0;
			                        width: 100%;
			                        height: 100%;
			                        opacity: 0;
			                    }
			                </style>
			                <button class="btn"></button>
			            </script>
					</wx-open-launch-weapp>
				</view>
			</view> -->

			<view class="carouselChart">
				<liu-slide-img :heightNumber="190" :list="list" :autoplay="autoplay" :interval="interval"
					@click="clickSlideImg"></liu-slide-img>
			</view>

			<view style="padding: 30rpx 0 50rpx 0;"  class=" flex-column">
				<!-- <image class="companyIcon margin-bottom_10rpx" :src="getConfig.gongzonghao_icon" mode=""></image> -->
				<text style="color: #666666">{{getConfig.skill_name}}</text>
			</view>

		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class=" gzhCard">
					<view style="text-align: center;" class="margin-top_100rpx">
						余额变动、商城订单状态、会员日、 消息、及时推送信息等等
						<image class="qrcode" :src="getConfig.gongzonghao_qr_code" mode=""></image>
						<view class="font-weight_bold">
							关注公众号 享受更好服务
						</view>
					</view>






				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="myPackagePopups">
			<template v-slot:content>
				<view class=" backgroundImg" :style="{ '--bg-image': `url(${getConfig.distribution_poster})` }">
					<image class="qrcode" :src="userInfo.invite_url" mode=""></image>
				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
	import proGress from '@/components/progress/progress.vue';
	export default {
		components: {
			TabBar,
			proGress
		},
		props: {

			// 多模版table列表展示
			tabListNum: {
				type: Number,
				default: 1
			}
		},
		data() {

			return {
				tabIndex: 0,
				packageTypes: 4,
				StepInfos: {},
				Steps: [],
				// menuNavigationList: [{
				// 		img: '../../static/会员卡首页4/组合 315.png',
				// 		text: '商城折扣',
				// 		type: 0,
				// 		secondText: '等级高,折扣大'
				// 		// url: '/pages/statistics/index/index'
				// 	},
				// 	{
				// 		img: '../../static/会员卡首页4/组合 316.png',
				// 		text: '特权奖励',
				// 		secondText: '最高100优惠券',
				// 		// url: '/pages/merchantConfiguration/merchantConfiguration',
				// 		type: 9
				// 	},
				// 	{
				// 		img: '../../static/会员卡首页4/组合 317.png',
				// 		text: '生日福利',
				// 		type: 10,
				// 		secondText: '20元无门槛券',
				// 		// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
				// 	},
				// 	{
				// 		img: '../../static/会员卡首页4/组合 318.png',
				// 		text: '升级礼包',
				// 		type: 11,
				// 		secondText: '升级奖999券',
				// 		// url: '/pages/service-area/service-area'
				// 	},

				// ],
				menuNavigationList: [],
				menuList: [{
						img: '../../static/会员卡首页4/组合 323.png',
						text: '待支付',
						index: 1
						// url: '/pages/statistics/index/index'
					},
					{
						img: '../../static/会员卡首页4/组合 322.png',
						text: '待发货',
						// url: '/pages/merchantConfiguration/merchantConfiguration',
						index: 2
					},
					{
						img: '../../static/会员卡首页4/组合 320.png',
						text: '待收货',
						index: 3
						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},
					{
						img: '../../static/会员卡首页4/组合 321.png',
						text: '已经完成',
						index: 5
						// url: '/pages/service-area/service-area'
					},

				],
				// 数据明细
				dataDetails: [{
						number: 3.00,
						text: '我的余额'
					},
					{
						number: 3.00,
						text: '我的卡券'
					},
					{
						number: 18000,
						text: '套餐卡'
					},
					{
						number: 1568,
						text: '我的积分'
					},
				],
				// 其他配置
				otherNavigationList: [
					// {
					// 	img: '../../static/会员卡首页4/组合 325.png',
					// 	text: '充值中心',

					// 	url: '/pages/voucherCenter/voucherCenter'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 326.png',
					// 	text: '分销中心',
					// 	url: '/pages/distribution/distribution',

					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 327.png',
					// 	text: '优惠券',

					// 	url: '/pages/couponPage/couponPage'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 328.png',
					// 	text: '个人信息',

					// 	url: '/pages/improveInformation/improveInformation'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 336.png',
					// 	text: '收支记录',

					// 	url: '/pages/revenueRecords/revenueRecords'
					// },

					// {
					// 	img: '../../static/会员卡首页4/组合 333.png',
					// 	text: '充值记录',

					// 	url: '/pages/revenueRecords/revenueRecords'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 332.png',
					// 	text: '套餐卡',

					// 	url: '/pages/packageCard/packageCard'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 329.png',
					// 	text: '推广海报',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 335.png',
					// 	text: '提现记录',

					// 	url: '/pages/distribution/distributionRecords/distributionRecords'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 334.png',
					// 	text: '我的团队',

					// 	url: '/pages/distribution/myFans/myFans'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 369.png',
					// 	text: '地址管理',

					// 	url: '/pages/addressManagement/addressManagement'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 331.png',
					// 	text: '在线客服',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 488.png',
					// 	text: '进入后台',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 934.png',
					// 	text: '关注公众号',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页4/组合 992.png',
					// 	text: '领券中心',

					// 	url: '/pages/couponCenter/couponCenter'
					// },

				],
				// 轮播图
				list: [{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png"
					}
				],
				autoplay: true,
				interval: 5000,
				token: uni.getStorageSync('login').token,
				userInfo: uni.getStorageSync('login'),
				getConfig: null
			}
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		mounted() {
			this.init()
			// this.signWxFn()
		},
		updated() {

		},
		onLoad() {
			console.log('page Show')
		},
		signFn() {
			// 跳转到签到页面
			this.$sun.navGo('/pages/signIn/signIn');
		},
		onShow: function() {

			console.log('page Show')
		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		methods: {
			// async signWxFn() {
			// 	// console.log('https://ship.admin168.net/H5/index.html?id=4#/'.split('#/')[0].split("?")[0])
			// 	// window.location.href.split('#/')[0].split("?")[0]
			// 	const result = await this.$http.post({
			// 		url: this.$api.sign,
			// 		data: {
			// 			url: window.location.href.split('#/')[0]


			// 		},
			// 		headers: {
			// 			'Authorization': `Bearer ${this.token}`
			// 		}

			// 	})
			// 	if (result.code == 0) {
			// 		this.signParams = result.data
			// 		this.$wx.config({
			// 			debug: true,
			// 			appId: this.signParams.appId,
			// 			timestamp: this.signParams.timestamp,
			// 			nonceStr: this.signParams.noncestr,
			// 			signature: this.signParams.sign,
			// 			jsApiList: [
			// 				'updateAppMessageShareData',
			// 				'updateTimelineShareData',
			// 				'onMenuShareTimeline',
			// 				'onMenuShareAppMessage',
			// 				'onMenuShareQQ',
			// 				'onMenuShareWeibo',
			// 				'wx-open-launch-weapp',
			// 				'getLocation',
			// 				'checkJsApi',
			// 				'chooseContact',
			// 				'scanQRCode'
			// 			],
			// 			openTagList: ['wx-open-launch-weapp']
			// 		});



			// 	} else {
			// 		this.$sun.toast(result.msg, 'none')
			// 	}
			// },
			handleLaunchFn() {
				// this.$sun.toast('进入成功');
			},
			handleErrorFn(e) {
				// this.$sun.toast('失败===' + e);
			},
			memberCard() {
				this.$sun.navGo('/pages/qRCodePayment/qRCodePayment')
			},
			scanFns(item) {
				console.log(item)
				this.$refs.myPackagePopups.show({
					style: 'padding:50rpx;',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});

			},
			rechargeFn() {
				this.$sun.navGo('/pages/voucherCenter/voucherCenter')
			},

			async init() {


				const resq = await this.$http.post({
					url: this.$api.getConfig,
					data: {

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (resq.code == 0) {
					this.getConfig = resq.data

				}
				// 获取会员权益
				const res = await this.$http.post({
					url: this.$api.module,
					data: {
						type: 2
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				console.log(res)
				if (res.code == 0) {
					console.log(res)




					this.$sun.toast(res.msg, 'none')
					this.menuNavigationList = res.data

				} else {

					this.$sun.toast(res.msg, 'none')
				}
				// 修改权益自定义tab'
				const resTool = await this.$http.post({
					url: this.$api.module,
					data: {
						type: 1
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})


				console.log(resTool)
				if (resTool.code == 0) {
					console.log(resTool)
					this.$sun.toast(resTool.msg, 'none')
					this.otherNavigationList = resTool.data.map((item) => {
						return {
							img: item.icon,
							text: item.name,
							url: item.link,
							id: item.id,
							fixed_name:item.fixed_name

						}
					})

				} else {

					this.$sun.toast(resTool.msg, 'none')
				}
				// 获取用户等级
				const result = await this.$http.post({
					url: this.$api.userLevel,
					data: {

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				console.log(result)
				// 获取等级列表
				if (result.code == 0) {
					console.log(result)
					// dataDetails

					this.Steps = result.data.map((item) => {
						return {
							p_price: item.name,
							p_number: item.id
						}
					})

					// 这里需要根据login id来判断当前是在什么等级
					let level_id = uni.getStorageSync('login').level_id

					const index = this.Steps.findIndex((item) => {
						return item.p_number == level_id
					})

					console.log('index', index)
					// StepInfos: {
					// 	// 0 33 66 99
					// 	Current: 66, //百分比（先传条数即可）
					// 	Sum: 4 //共多少步骤(Number类型)
					// },

					let dd = (100 / (Number(this.Steps.length) - 1)) * index;
					console.log(dd)
					this.StepInfos = {
						// 0 33 66 99
						Current: dd, //百分比（先传条数即可）
						Sum: this.Steps.length //共多少步骤(Number类型)
					}
					console.log(this.StepInfos)


				} else {

					this.$sun.toast(result.msg, 'none')
				}
				// 轮播图

				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {
						type: 1
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.list = resPoster.data.filter(item => item.type === 1);

					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}

			},
			navTo(item) {
			console.log(item)
			// 如果是公众号就弹出公众号二维码
			if (item.fixed_name == '关注公众号') {
				this.scanFn()
				return
			}
			// 进入后台
			if(item.fixed_name == '进入后台'){
				console.log('进入后台')
				uni.setClipboardData({
					data: item.url
				});
			}
			// 在线客服
			if(item.fixed_name =='在线客服'){
				console.log('在线客服')
				this.$sun.phone(item.url)
				// uni.setClipboardData({
				// 	data: item.url
				// });
			}
			// 推广海报
			if (item.fixed_name == '推广海报') {
				if(this.getConfig.distribution_level==0){
					// 
					this.$sun.toast('请开启分销','none')
				}else{
					this.scanFns()
					return
				}
			}
			
			 // 分销中心
			if (item.fixed_name == '分销中心') {
				console.log('分销中心')
				this.$sun.navRe('/pages/firstPage/firstPage', {
					currentIndex: 4
				})
				// 套餐卡
			} else if (item.fixed_name == '我的套餐卡') {
				this.$sun.navRe('/pages/firstPage/firstPage', {
					currentIndex: 3
				})
						
			}else if (item.fixed_name == '我的团队') {
				if(this.getConfig.distribution_level==0){
					// 
					this.$sun.toast('请开启分销','none')
					return
				}
			      this.$sun.navGo(item.url);
			 } else {
				this.$sun.navGo(item.url);
			}

			},
			scanFn() {
				this.$refs.myPackagePopup.show({
					style: '',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},

			signFn() {
				// 跳转到签到页面
				this.$sun.navGo('/pages/signIn/signIn');
			},
			// 查看全部订单
			checkAllOrderFn() {

				this.$sun.navGo('/pages/orderManagement/orderManagement');
			},
			checkOrderFn(item) {
				this.$sun.navGo('/pages/orderManagement/orderManagement', {
					currentIndex: item.index
				});
			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				} else {
					// 跳转小程序
					this.$sun.toast('跳转小程序', 'none')
				}
				console.log(e)
			},
			modifyAvaterInfo() {
				this.$sun.navGo('/pages/improveInformation/improveInformation', {
					...this.userInfo
				});
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.backgroundImg {

		width: 696rpx;
		height: 994rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: (var(--bg-image));
		position: relative;

		.qrcode {
			width: 245rpx;
			height: 245rpx;
			position: absolute;
			bottom: 224rpx;
			left: 230rpx;
		}
	}

	// 轮播图
	.carouselChart {
		margin-top: 20rpx;
		width: 690rpx;
		height: 190rpx;
		border-radius: 20rpx;
		// background: linear-gradient(102.41deg, rgb(245, 221, 158) 0.753%, rgb(255, 220, 143) 99.163%);


	}

	.companyIcon {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.gzhCard {
		background-repeat: no-repeat;
		padding: 80rpx;
		// background-color: #fff;
		background-size: contain;
		background-image: url('../../static/bg 1.png');
		height: 708rpx;
		width: 650rpx;

		.qrcode {
			margin: 20rpx 0;
			width: 251.02rpx;
			height: 251.2rpx;
		}
	}

	// 数据详情
	.dataDetailsCard {
		margin-top: 22rpx;
		width: 100%;
		height: 126rpx;
		border-radius: 20rpx;
		padding: 0 50rpx;
		background: rgb(255, 255, 255);

		.dataDetailsBorder {


			color: rgb(239, 239, 239);
		}
	}

	// 我的订单
	.myOrderCards {
		width: 100%;

		border-radius: 20rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		background: rgb(255, 255, 255);
		padding: 24rpx 48rpx;

		.myOrder {
			padding-bottom: 25rpx;

			// border-bottom: 2rpx solid rgb(237, 237, 237);
			.rectangle {
				width: 8rpx;
				height: 28rpx;
				background: rgb(76, 201, 55);
				display: inline-block;
				margin-right: 15rpx;
			}
		}

		.avaterIcon {
			width:70rpx;
			height: 70rpx;
			margin-bottom: 14rpx;
		}

		.infoBox {
			width: 25%;
			margin-bottom: 10rpx;
		}

		.rightContent {
			.authorizationTitle {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				// font-weight: 600;
				margin-bottom: 11rpx;
			}

			.moreToolTitle {
				color: #666666;
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 11rpx;
			}

			.authorizationText {
				color: #666;
				font-family: Inter;
				font-size: 24rpx;
			}
		}
	}


	.wxbtn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		color: #FFFFFF;
		font-weight: 500;
		position: relative;
		background-color: #f60;

		.ct {
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
		}
	}


	.headInformation {
		.signImg {
			position: fixed;
			width: 86.54rpx;
			height: 84rpx;
			right: 0;
			bottom: 10%;
		}

		.backgroundColor {
			width: 750rpx;
			height: 520rpx;

			// position: absolute;
			// z-index: 9;
			// right: 20rpx;
			// top: 36rpx;
			background: url('../../static/会员卡首页4/组合 307.png');
			background-repeat: no-repeat;
			background-size: cover;
			text-align: center;
			padding: 45rpx 26rpx 0;

			.headformation {
				margin-bottom: 10rpx;

				.avater {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}

				// .memberType {
				// 	font-family: 思源黑体;
				// 	font-size: 22rpx;
				// 	font-weight: 400;
				// 	line-height: 32rpx;
				// 	color: rgb(255, 255, 255);

				// 	.crownIcon {
				// 		width: 41.98rpx;
				// 		height: 32.18rpx;
				// 		margin-right: 10rpx;
				// 	}
				// }
				.memberType {
					/* 矩形 1043 */
					color: rgb(186, 128, 0);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 400;
					border-radius: 12rpx;
					width: 112rpx;
					height: 36rpx;
					background-color: #FFDC8F;
				}
				// .memberType {
				// 	/* 矩形 1043 */
				// 	color: rgb(186, 128, 0);

				// 	font-size: 20rpx;
				// 	font-weight: 400;
				// 	border-radius: 12rpx;
				// 	width: 112rpx;
				// 	height: 36rpx;
				// 	line-height: 32rpx;
				// 	background-color: #FFDC8F;
				// }

				.membershipCode {
					.codeImage {
						width: 48rpx;
						height: 48rpx;
					}
				}

			}

			.nestedBackground {
				background: url('../../static/会员卡首页4/组合 319.png');
				background-repeat: no-repeat;
				background-size: cover;
				text-align: center;
				width: 700rpx;
				height: 370rpx;
				position: relative;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				padding: 65rpx 20rpx 0;

				.rechargeBtn {
					width: 130rpx;
					height: 55rpx;
					position: absolute;
					right: -15rpx;
					top: 25rpx;
				}

				.triangle {
					width: 0;
					height: 0;
					position: absolute;
					right: 50%;
					transform: translateX(50%);
					border-left: 20px solid transparent;
					border-right: 20px solid transparent;
					border-top: 20px solid #3d3d3d;
					/* 可以更改为你想要的颜色 */
				}
			}

			// 我的订单
			.myOrderCard {


				.myOrder {
					padding-bottom: 25rpx;
					border-bottom: 2rpx solid rgb(237, 237, 237);
				}

				.avaterIcon {
					width: 76rpx;
					height: 76rpx;
					margin-bottom: 14rpx;
				}

				.infoBox {
					width: 25%;
					margin-bottom: 10rpx;
				}

				.rightContent {
					.authorizationTitle {
						color: #fff;
						font-size: 28rpx;
						font-weight: 400;
						margin-bottom: 11rpx;
					}

					.secondAuthorizationTitle {
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						font-weight: 400;
						margin-bottom: 11rpx;
					}

					.moreToolTitle {
						color: #666666;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 11rpx;
					}

					.authorizationText {
						color: #666;
						font-family: Inter;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>